<template>
	<view>
		<view style="padding-top: 30rpx;" class="page">
			<view v-for="item,index in list" class="itemClass" :style="{backgroundColor:item.activeColor}"
				@click="click(item)">
				<div class="name">{{item.name}}</div>
				<div class="iconBox">
					<image class="icon" :src="item.url"></image>
				</div>
			</view>
			
			<view class="itemClass" :style="{backgroundColor:'#F56C6C'}"
				@click="exportExcelMethod()">
				<div class="name">导出数据</div>
				<div class="iconBox">
					<image class="icon" :src="list2[3].url"></image>
				</div>
			</view>
		</view>
		<bottomButton value="退出登录" style="padding-bottom: 80rpx;" @onPress="loginOut" />
	</view>
</template>

<script>
	import bottomButton from "@/components/bottomButton.vue"
	import {exportExcel, tableToExcel} from "@/utils/file.js"
	import {
		getInfo
	} from "../../api/byfz"
	import {
		clearLoginState
	} from "../../utils/util"
	export default {
		data() {
			return {
				list: [],
				list2: [{
					name: '生产记录',
					value: 'addBus',
					key: 'shengchan',
					activeColor: 'rgba(0,151,216)',
					url: require('@/static/sc_icon.png')
				}, {
					name: '交货记录',
					value: 'addBusSubmit',
					key: 'jiaohuo',
					activeColor: 'rgba(243,167,49)',
					url: require('@/static/jh_icon.png')
				}, {
					name: '采购记录',
					value: 'addCg',
					key: 'caigou',
					activeColor: 'rgba(251,154,85)',
					url: require('@/static/cg_icon.png')
				}, {
					name: '样品记录',
					value: 'addYp',
					key: 'yangpin',
					activeColor: 'rgba(73,179,112)',
					url: require('@/static/yp_icon.png')
				}]
			}
		},
		components: {
			bottomButton
		},
		onLoad() {
			this.getInfoFunc()
			uni.$on('refreshAdd', () => {
				// 在这里执行onLoad逻辑
				this.getInfoFunc()
			})
		},
		methods: {
			async getInfoFunc() {
				const res = await getInfo();
				this.list = []
				console.log("res==", res);
				if (res.roles && res.roles.find(i => i == 'admin')) {
					this.list = this.list2
				} else {
					for (let item of res.roles) {
						if (this.list2.find(i => i.key == item)) {
							this.list.push(this.list2.find(i => i.key == item))
						}
					}
				}
			},
			loginOut() {
				clearLoginState()
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			click(item) {
				uni.setStorageSync('formData', {
					type: 'add'
				})
				uni.navigateTo({
					url: './' + item.value
				})
			},
			exportExcelMethod(){
				exportExcel(uni.getStorageSync("allData"),'text','text')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-wrap: wrap;
		padding-left: calc(10% - 10rpx);
		padding-right: calc(10% - 10rpx);
	}
	.outExcel{
		margin-top: 20rpx;
		color: #fff;
		background-color: skyblue;
	}

	.itemClass {
		width: calc(50% - 40rpx);
		border-radius: 10rpx;
		margin: 10rpx;
		color: #fff;
		font-size: 25rpx;
		padding: 10rpx;

		.name {
			margin-left: 20rpx;
		}

		.iconBox {
			text-align: right;
		}

		.icon {
			margin-top: 40rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>